<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('当日柜员流水影像')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: viewer-css" />
    <style>
        #detail_modal-body{padding:5px}
        #detail_modal-body .box-body{padding:0px}
        #detail_modal-body .row>div{padding-right:0px;}
        #detail_modal-body .row>div:last-child{padding-right:15px;}
        #imageBox img{width:100%;display:none}
        .viewer-fullscreen{display: none;}
    </style>
</head>
<body class="gray-bg">
    <div id="detail_modal-body" class="modal-body">
        <div class="row">
            <div class="col-md-3" >
                <div class="box box-primary">
                    <div class="box-header with-border" >
                        <i class="fa fa-list-ol"></i>
                        <h4 class="box-title">流水列表</h4>
                    </div>
                    <div class="box-body" >
                        <div id="paeaDsTradeList"  style="height:0px; padding-bottom:180%;overflow: auto">
                            <table id="paeaDsTrade-table" data-use-row-attr-func="true"
                                   data-reorderable-rows="true" class="table-dark table-sm"></table>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <i class="fa fa-photo"></i>
                        <h4 class="box-title">影像信息</h4>
                    </div>
                    <div class="box-body" id="imageBody">
                        <div class="imageBox" id="imageBox" style="height:0px;padding-bottom:60%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: viewer-js" />
<script th:inline="javascript">
    var tradeTellerImagesVo = [[${tradeTellerImagesVo}]];
    var viewer;
    var imageUrlPrefix = tradeTellerImagesVo.imageUrlPrefix;
    $(function () {
        initImageArea();
        //加载流水列表
        var paeaDsTradeDetails = tradeTellerImagesVo.paeaDsTradeDetails;
        $("#paeaDsTrade-table").bootstrapTable('load',paeaDsTradeDetails);
        setTimeout('checkCurrTrade()',100);
    })

    //流水列表
    var paeaDsTradeOptions = {
        onCheck:function(row){
            updateImage(row.sdiImageInputList);
        },
        clickToSelect: true,
        columns: [{
            radio: true
        },
            {
                field : 'id',
                title : 'ID',
                visible : false
            },
            {
                field : 'seq',
                title : '序号',
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            {
                field : 'brCode',
                title : '机构'
            },
            {
                field : 'trTelr',
                title : '柜员'
            },
            {
                field : 'vchNo',
                title : '流水'
            },
            {
                field : 'outSideSelect',
                title : '默认选中标识',
                visible: false
            }
            ]
    };
    $("#paeaDsTrade-table").bootstrapTable(paeaDsTradeOptions);

    //初始化影像显示
    function initImageArea() {
        var imgUrl = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584958911886&di=47b6a313b01424ad2593609115dbd145&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201507%2F31%2F161843qkvv4oq21nrvtjui.jpg";
        $('#imageBox').append('<img name= "img'+'demo'+'" id="imgArea" src="'+imgUrl+'" alt="示例图片">');
        viewer = new Viewer(document.getElementById('imageBox'),{
            inline: true,
            navbar: true,
            toolbar: true,
            title: true,
            button: true,
            show: function () {
                viewer.update();
            }
        });
    }

    function updateImage(sdiImageInputList) {
        $('#imageBox').empty();
        $.each(sdiImageInputList, function(index, sdiImageInput) {
            var imageUrl = 'http://'+imageUrlPrefix +sdiImageInput.sdifilepath;
            $('#imageBox').append('<img name= "img'+index+'" src="'+imageUrl+'" alt="影像">');
        });
        viewer.update();
    }

    function checkCurrTrade() {
        $("#paeaDsTrade-table").bootstrapTable('checkBy', {field:'id', values:[tradeTellerImagesVo.currId]});
    }
</script>
</body>
</html>